<template>
  <div class="color-block"></div>
</template>

<script>
export default {
  data () {
    return {
      isRed: true
    };
  }
};
</script>

<style scoped lang="less">
// 在 LESS 文件中定义静态变量
@is-red: false;

.color-change(@isRed) when (@isRed =true) {
  background-color: red;
}

.color-change(@isRed) when not(@isRed =true) {
  background-color: blue;
}

.color-block {
  width: 100px;
  height: 100px;
  .color-change(@is-red);
}
</style>